<template>
	<view class="index">
		<view class="pptag">
			<el-tag v-for="(item,index) in list" size="medium" @click="selecttag(index)" :type="ac == index?'danger':''"
				class="taglist">{{item.name}}</el-tag>
		</view>
		<view class="carlist">
			<el-card class="carcard" style="width: 48%;" v-for="item in carlist">
				<view class="carimg">
					<image :src="item.carimg"></image>
				</view>
				<view class="cartitle">
					汽车名称:{{item.carname}}
				</view>
				<view class="cartitle">
					汽车品牌:{{item.name}}
				</view>
				<view class="cartitle">
					租金:{{item.zj}}元/日
				</view>
				<view class="cartitle">
					状态:<span v-if="item.status == 0">未租赁</span><span v-if="item.status == 1">已租赁</span><span v-if="item.status == 2">已下架</span>
				</view>
				<el-button type="success" plain v-if="item.status == 0" size="small" @click="zl(item)">租赁</el-button>
			</el-card>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				carlist: [],
				ac: 0
			}
		},
		mounted() {
			this.getdata()
		},
		methods: {
			zl(i){
				uni.navigateTo({
					url:`/pages/zl/zl?id=${i.id}&&carimg=${i.carimg}&&zj=${i.zj}`
				})
			},
			selecttag(i) {
				this.ac = i
				this.getcar(this.list[i].id)
			},
			getdata() {
				uni.request({
					url: "/index/pinpaiall",
					method: "GET",

					success: (res) => {
						console.log(res)
						this.list = res.data.data
						this.list.unshift({
							id: '',
							name: "全部"
						})
						console.log(this.list)
						this.getcar(this.list[0].id)
					}
				})

			},
			getcar(a) {
				uni.request({
					url: "/index/carbyid",
					method: "GET",
					data: {
						ppid: a
					},
					success: (res) => {
						console.log(res)
						this.carlist = res.data.data
					}
				})

			}
		}
	}
</script>

<style>
	.taglist {
		margin-right: 10px;
	}

	.carimg image {
		width: 100%;
		height: 100%;
		border-radius: 5px;

	}
.cartitle{
	margin-bottom: 10px;
	font-size: 14px;
	color: #333;
}
	.carimg {
		width: 100%;
		height: 80px;
	}

	.pptag {
		width: 100%;
		height: auto;
		overflow-y: hidden;
		overflow-x: auto;
		white-space: nowrap;
		margin-bottom: 10px;
	}

	.carlist {
		width: 100%;
		height: auto;
		display: flex;
		flex-wrap: wrap;
	}

	.carcard {
		margin-right: 10px;
		margin-bottom: 10px;

	}

	.carcard:nth-child(2n) {
		margin-right: 0px !important;
	}

	.index {
		width: 100%;
		height: 100%;
		padding: 10px;
		box-sizing: border-box;
	}
</style>